<template>
	<view class="preview-box">
		<view class="swiper-box">
			<swiper circular>
				<swiper-item v-for="item,index in 5" :key="index" @click="clickMaskChange(index)">
					<!-- <image 
						src="https://img1.baidu.com/it/u=2846915896,3792284624&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200" 
						mode="aspectFill">
					</image> -->
					<image
						src="https://img1.baidu.com/it/u=1560330279,3254546236&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666" 
						mode="aspectFill">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="mask-box" v-if="isShowMask">
			<view class="goBack">
				
			</view>
			<view class="count">
				6 / 9
			</view>
			<view class="time">
				<uni-dateformat :date="new Date().toString()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="new Date().toString()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box info" @click="openInfoDialog">
					<uni-icons type="info" size="24"></uni-icons>
					<view class="text">
						信息
					</view>
				</view>
				<view class="box star" @click="clickOpenRateDialog">
					<uni-icons type="star" size="24"></uni-icons>
					<view class="text">
						评分
					</view>
				</view>
				<view class="box download">
					<uni-icons type="download" size="24"></uni-icons>
					<view class="text">
						下载
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="infoPopup" type="bottom">
			<view class="popup-content">
				<view class="header">
					<!-- 占位 -->
					<view class="left"></view> 
					<view class="title">
						书籍信息
					</view>
					<view class="close-icon" @click="clickClosePopup">
						<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y>
					<view class="row">
						<view class="label">
							书籍编号：
						</view>
						<view class="content">
							sds25s5ds5d1s515sd
						</view>
					</view>
					<view class="row">
						<view class="label">
							书籍名称：
						</view>
						<view class="content">
							三国演义
						</view>
					</view>
					<view class="row">
						<view class="label">
							作者：
						</view>
						<view class="content">
							罗贯中
						</view>
					</view>
					<view class="row">
						<view class="label">
							分类：
						</view>
						<view class="content classify">
							古典名著
						</view>
					</view>
					<view class="row">
						<view class="label">
							评分：
						</view>
						<view class="content rate">
							<uni-rate :max="5" :value="3.5" size="20" readonly />
							<view class="score">
								3.5分
							</view>
						</view>
					</view>
					<view class="row">
						<view class="label">
							标签：
						</view>
						<view class="content tags">
							<uni-tag class="tag" text="标签1" type="success" :circle="true" size="small"></uni-tag>
							<uni-tag class="tag" text="标签2" type="success" :circle="true" size="small"></uni-tag>
							<uni-tag class="tag" text="标签3" type="success" :circle="true" size="small"></uni-tag>
						</view>
					</view>
					<view class="row">
						<view class="label">
							摘要：
						</view>
						<view class="content">
							5xxx上帝视角肯定是电视剧几万i外地说的就是降低手机十大手机都ID积极四大搜社交电商第三
						</view>
					</view>
					<view class="copyright">
						声明：5xxx上帝视角肯定是电视剧几万i外地说的就是降低手机十大手机都ID积极四大搜社交电商第三
						5xxx上帝视角肯定是电视剧几万i外地说的就是降低手机十大手机都ID积极四大搜社交电商第三。
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		<!-- 输入框示例 -->
		<uni-popup ref="bookRateDialog" type="dialog" class="book-rate-dialog">
			<uni-popup-dialog ref="rateDialog"  mode="input" title="书籍评分" value="" @close="clickCloseCurBookRateDialog" @confirm="clickConfirmRate">
				<uni-rate v-model="curBookRate" allow-half/>
				<text class="text">{{curBookRate}}分</text>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowMask: true,
				curBookRate: 5
			};
		},
		methods: {
			clickMaskChange(index){
				this.isShowMask = !this.isShowMask;
				// uni.showToast({
				// 	title: `点击 ${index} 个图`
				// })
			},
			// 信息弹窗
			openInfoDialog(){
				this.$refs.infoPopup.open()
			},
			// 关闭弹窗
			clickClosePopup(){
				this.$refs.infoPopup.close()
			},
			clickOpenRateDialog(){
				this.$refs.bookRateDialog.open()
			},
			clickCloseCurBookRateDialog(){
				this.$refs.bookRateDialog.close()
			},
			// 确认评分
			clickConfirmRate(){
				if(this.curBookRate === 0){
					uni.showToast({
						title: "评分不能为0"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.preview-box{
	width: 100%;
	height: 100vh; //1vh = 1%
	.swiper-box{
		width: 100%;
		height: 100%;
		swiper{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.mask-box{
		// 公共样式  &:表示父级元素 >:表示子元素(不包括孙元素)
		&>view{
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			width: fit-content; // 内容有多少，宽度就有多宽
			color: #fff;
		}
		.goBack{}
		.count{
			top: 10vh; // 10%
			background: rgba(0, 0, 0, 0.3);
			font-size: 28rpx;
			border-radius: 40rpx;
			padding: 8rpx 28rpx;	
			backdrop-filter: blur(10rpx); //模糊效果
		}
		.time{
			// 10vh基于上一个元素 count
			top: calc(10vh + 80rpx); //加号前后需要加空格，否则无法计算
			font-size: 140rpx;
			font-weight: 100;
			line-height: 1em;
			text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
		}
		.date{
			top: calc(10vh + 240rpx);
			font-size: 34rpx;
			text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
		}
		.footer{
			bottom: 10vh;
			background: rgba(255, 255, 255, 0.8);
			width: 65vw;
			height: 120rpx;
			border-radius: 120rpx;
			color: #000;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(20rpx);
			.box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 2rpx 12rpx;
				.text{
					font-size: 26rpx;
					color: $common-font-color-1;
				}
			}
		}
	}
	.popup-content{
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
		overflow: hidden;
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 30rpx;
				color: $common-font-color-1;
			}
			.close-icon{
				padding: 8rpx;
			}
		}
		scroll-view{
			max-height: 60vh;
			.row{
				padding: 15rpx 0;
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				line-height: 1.7em;
				.label{
					color: $common-font-color-1;
					width: 160rpx;
					text-align: right;
					font-size: 30rpx;
				}
				.content{
					flex: 1;
					width: 0;
				}
				
				.rate{
					display: flex;
					align-items: center;
					.score{
						color: $common-font-color-1;
						padding-left: 15rpx;
						font-size: 30rpx;
					}
				}
				.tags{
					.tag{
						margin-right: 12rpx;
					}
				}
				.classify{
					color: $common-icon-theme-color;
				}	
			}
			.copyright{
				font-size: 28rpx;
				padding: 20rpx;
				background: #F6F6F6;
				color: #666;
				border-radius: 10rpx;
				margin: 20rpx 0;
				line-height: 1.6em;
			}
		}
	}

	.book-rate-dialog{
		.text{
			color: #FFCA3E;
			padding-left: 10rpx;
			width: 80rpx;
			line-height: 1em;
			text-align: right;
		}
	}
}

</style>
